<template>
	<view class="consumptionLog_container">
		<!--  -->
		<uni-card title="Dcloud" note="true" v-for="(item, index) in consumptionLog" :key="index">
			<template slot="title">
				<u-row>
					<u-col span="9">
						<u--text :prefixIcon="index + 1"
							iconStyle="color: #18b566;margin-right:10px;text-decoration: underline;font-weight: 400;"
							size="14" lineHeight="30" align="left" type="info" :text="'订单号:'+item.orderId" />
					</u-col>
					<u-col span="3">
						<u--text suffixIcon="checkbox-mark" iconStyle="color: #18b566;font-weight: bold;" mode="price"
							lineHeight="30" size="15" align="right" type="warning" :text="item.totalPrice" />
					</u-col>
				</u-row>
				<u-divider style="margin: 0;"></u-divider>
			</template>
			<u-row>
				<u-col span="6">
					<u--text prefixIcon="hourglass" size="12" align="left" type="info" :text="item.applyTime" />
				</u-col>
				<u-col span="6">
					<u--text prefixIcon="hourglass-half-fill" size="12" align="right" type="info"
						:text="item.chargeTime" />
				</u-col>
			</u-row>
		</uni-card>
		<u-empty mode="list" v-if="consumptionLog.length == 0"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				consumptionLog: []
			};
		},
		onPullDownRefresh() {
			this.getConsumptionLog(true);
		},
		onLoad() {
			this.getConsumptionLog();
		},
		watch: {},
		methods: {
			getConsumptionLog(refresh = false) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let data = uni.getStorageSync('consumptionLog');
				if (!refresh) {
					this.consumptionLog = data;
					uni.hideLoading();
					return;
				}
				this.$axios
					.get('/PaymentScanCode/account/consumptionLog')
					.then(res => {
						this.consumptionLog = [];
						res.data.data.forEach(item => {
							this.consumptionLog.push(JSON.parse(item));
						})
						uni.hideLoading();
						uni.setStorageSync('consumptionLog', this.consumptionLog);
					},err=>{uni.hideLoading();});
			}
		}
	};
</script>

<style lang="scss">
	.consumptionLog_container {
		.u-divider {
			margin: 5px 0 !important;
		}

		.uni-card__content {
			padding: 5px 0 !important;
		}
	}
</style>
